<!-- 乐跑 -->
<template>
  <div class="run">
    <NavBar :fnTitle="title"></NavBar>

     <!-- 信息展示 -->
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
         <div
          class="info_show"
          :data="tableData"
          v-for="item in tableData"
          :key="item.id"
          >
          <div class="photo">
            <img src="https://gitee.com/xiao-ershi/img/raw/master/%E5%9B%BE%E5%B1%82%2010%20%E6%8B%B7%E8%B4%9D.png" alt="" >
          </div>
          <div class="top"  >
            <br>
            <br>
            <van-row >
              <van-col offset="3"  span="24"> {{ item.text }} </van-col>
            </van-row>
            <br>
            <van-row>
              <van-col offset="2"  span="9">开始：{{ item.created_at }}</van-col>
              <van-col offset="2" span="9"> 结束：{{ item.updated_at }} </van-col>
            </van-row>
          </div>
          <div class="bottom">
              <button class="btn"  @click="doit(item.id)">同行</button>
        </div>

         <!-- 弹出层 -->
         <!-- 匹配成功 -->
      <van-dialog v-model="show" title="详细信息" show-cancel-button>
        <van-field label="账户" v-model="tanchu.account" type="account" value="" readonly />
        <van-field label="邮箱" v-model="tanchu.email" type="email" value="" readonly />
        <van-field label="姓名" v-model="tanchu.name" type="name" value="" readonly />
        <van-field label="手机" v-model="tanchu.phone" type="phone" value="" readonly />
        <van-field label="学校" v-model="tanchu.school" type="school" value="" readonly />
        <van-field label="开始时间" v-model="tanchu.created_at" type="created_at" value="" readonly />
        <van-field label="结束时间" v-model="tanchu.updated_at" type="updated_at" value="" readonly />
      </van-dialog>
      </div>
    </van-pull-refresh>

  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)

import { Toast } from 'vant'
export default {
  created() {
    this.GetAll()
  },
  data() {
    return {
      title: '乐跑',
      tableData: [],
      show: false, // 弹出层
      tanchu: [],
      maintext: '',
      // 下拉刷新
      count: 0,
      isLoading: false
    }
  },
  components: {
    NavBar,
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    // 获取所有人显示
    async GetAll() {
      const { data: res } = await this.$http.get('/api/run/happyrunselect')
      if (res.code !== 200) {
        //  console.log('获取用户列表失败！')
      }
      this.tableData = res.data
      if (this.tableData === []) {
        this.maintext = '暂无消息'
      }
      this.maintext = ''
      // console.log(res);
    },

    // 弹出层
    showPopup() {
      this.show = true
    },
    showPopclose() {
      this.show = false
    },

    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
        this.GetAll()
      }, 1000)
    },

    // 是否需要乐跑
    doit(val) {
      // console.log(val);
      this.$dialog.alert({
        title: '乐跑', // 加上标题
        message: '确认乐跑？', // 改变弹出框的内容
        showCancelButton: true // 展示取消按钮
      })
        .then(() => { // 点击确认按钮后的调用
          this.runing(val)
        })
        // .catch((err) => { // 点击取消按钮后的调用
        //   // console.log(err)
        // })
    },

    // 同行接口调用
    async runing(val) {
      const { data: res } = await this.$http({
        method: 'post',
        url: '/api/run/happyrunaccept',
        data: this.$qs.stringify({ // 这里是发送给后台的数据
          id: val
        })
      })
      console.log(res)
      if (res.code !== 200) {
        // console.log(res);
        return
      }
      if (res.data.length === 0) {
        alert('您选择用户的信息缺少，请重新选择')
        return
      }
      this.tanchu = res.data[0]
      // console.log(this.tanchu);
      // console.log(res);
      this.showPopup()
    }
  }
}
</script>

<style scoped>

.run {
  height: 100%;
  /* background-color: rgb(149, 152, 155); */
}
.photo {
  position:relative;
  left:45%;
  margin-bottom: -15px;
  background-color: white;
  border-radius: 50px;
  padding-bottom:2px;
  width: 40px;
  height: 30px;
  text-align: center;
}

.info_show {

  width: 80%;
  margin: 0 auto;
  margin-top: 10%;
}
.top {
  height: 100px;
  background-color: skyblue;
}
.bottom {

  background-color: rgba(218, 218, 218, 0.247);
  text-align: center;
  height: 40px;

}
.btn {
  margin-top: 1%;
  border: 1px solid #fff;
  border-radius: 20px;
  background-color: skyblue;
  color: #fff;
  width: 60px;
  height: 30px;
}
.show {
  margin-top: 15px;
}
</style>
